<template>
  <div class="comment">
    <mytopfun title="精彩跟帖">
      <van-icon name="arrow-left" slot="left" @click="$router.go(-1)" />
      <van-icon name="home-o" slot="right" style="visibility: hidden" />
    </mytopfun>
    <div class="lists">
      <!-- 第一层 -->
      <div class="item" v-for="(item, index) in commentList" :key="index">
        <div class="head" style="margin-bottom: 10px">
          <img :src="item.user.head_img" alt />
          <div>
            <p>{{ item.user.nickname }}</p>
            <span>{{ item.create_date | getMoment }}</span>
          </div>
          <!-- 第一层的单击回复，文本域弹出 -->
          <span @click="backComment(item)">回复</span>
        </div>
        <!-- 第二层,commentList下面的parent相同-->
        <commentBlock
          :parent="item.parent"
          v-if="item.parent"
          @repalyComment="getComment"
        ></commentBlock>
        <div class="text">{{ item.content }}</div>
      </div>
    </div>
    <!-- 底部加上组件  传文章数据，渲染底部评论数量   commentObj传评论的用户id-->
    <myfooted
      :articaldetail="articaldetail"
      @refresh="refresh"
      :commentObj="commentObj"
      @changeObj="changeObj"
    ></myfooted>
  </div>
</template>

<script>
// 引入 moment过滤器
import { getMoment } from "@/filter/myfilter";
// 引头部
import mytopfun from "@/components/mytopfun";
// 引入请求api
import { post_comment } from "@/apis/article";
// 引入axios 获取 基准路径
import axios from "@/utils/myaxios";
import commentBlock from "@/components/commentBlock";
// 引入底部组件
import myfooted from "@/components/myfooted";
// 调用文章api
import { getAritcalDetail } from "@/apis/article.js";
export default {
  components: {
    mytopfun,
    commentBlock,
    myfooted,
  },
  filters: {
    //注册过滤器
    getMoment,
  },
  data() {
    return {
      // 数据存放地方
      commentList: [],
      articaldetail: {},
      commentObj: {},
    };
  },
  methods: {
    // 二级评论块，子传父
    getComment(v) {
      console.log(v);
      this.commentObj = v;
    },
    //把传给底部评论 值转为null
    changeObj() {
      this.commentObj = null;
    },
    // 点击回复的时候把值传个底部文本域组件
    backComment(item) {
      console.log(item);
      // 把item 传给底部组件
      this.commentObj = item;
    },
    // 点击回复，给子组件传用户id
    refresh() {
      this.init();
      // 返回到顶部,简单方式
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    // 封装评论列表函数让评论完之后刷新
    async init() {
      let res = await post_comment(this.$route.params.id);
      console.log(res);
      this.commentList = res.data.data.map((item) => {
        if (item.user.head_img) {
          item.user.head_img = item.user.head_img;
        } else {
          item.user.head_img =
            axios.defaults.baseURL + "/uploads/image/default.jpeg";
        }
        return item;
      });
      // 实时刷新，评论长度
      let result = await getAritcalDetail(this.$route.params.id);
      // console.log(result.data.data);
      this.articaldetail = result.data.data;
    },
  },
  async mounted() {
    //先获取 评论列表
    this.init();
    // let res = await post_comment(this.$route.params.id);
    // // console.log(res.data.data);
    // // 有一些没有图片要动态渲染
    // // console.log(res.data.data[0]create_date);
    // this.commentList = res.data.data.map((item) => {
    //   if (item.user.head_img) {
    //     item.user.head_img = item.user.head_img;
    //   } else {
    //     item.user.head_img =
    //       axios.defaults.baseURL + "/uploads/image/default.jpeg";
    //   }
    //   return item;
    // });
    // 获取到数据，渲染第一层，注意commentList 里面有一个parent的对象，下面开始是第2层
    // console.log(this.commentList);

    // 使用底部组件，我们必选也要获取传给底部组件的参数，也就是文章详情的参数
    // let result = await getAritcalDetail(this.$route.params.id);
    // console.log(result.data.data);
    // this.articaldetail = result.data.data;
  },
};
</script>

<style lang="less" scoped>
.lists {
  border-top: 5px solid #ddd;
  padding: 0 15px;
  .item {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      > img {
        width: 50/360 * 100vw;
        height: 50/360 * 100vw;
        display: block;
        border-radius: 50%;
      }
      > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        > span {
          font-size: 12px;
          color: #999;
          line-height: 25px;
        }
      }
      > span {
        color: #999;
        font-size: 13px;
      }
    }
    .text {
      font-size: 14px;
      color: #333;
      padding: 20px 0 10px 0;
    }
  }
}
</style>